﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>幸运抽奖</title>
    <!-- 淘宝布局 flexlib.js -->
    <script>
        ! function (a, b) {
            function c() {
                var b = f.getBoundingClientRect().width;
                b / i > 540 && (b = 540 * i);
                var c = b / 10;
                f.style.fontSize = c + "px", k.rem = a.rem = c
            }
            var d, e = a.document,
                f = e.documentElement,
                g = e.querySelector('meta[name="viewport"]'),
                h = e.querySelector('meta[name="flexible"]'),
                i = 0,
                j = 0,
                k = b.flexible || (b.flexible = {});
            if (g) {
                console.warn("将根据已有的meta标签来设置缩放比例");
                var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
                l && (j = parseFloat(l[1]), i = parseInt(1 / j))
            } else if (h) {
                var m = h.getAttribute("content");
                if (m) {
                    var n = m.match(/initial\-dpr=([\d\.]+)/),
                        o = m.match(/maximum\-dpr=([\d\.]+)/);
                    n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((1 / i).toFixed(2)))
                }
            }
            if (!i && !j) {
                var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)),
                    q = a.devicePixelRatio;
                i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
            }
            if (f.setAttribute("data-dpr", i), !g)
                if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f.firstElementChild) f.firstElementChild.appendChild(g);
                else {
                    var r = e.createElement("div");
                    r.appendChild(g), e.write(r.innerHTML)
                }
            a.addEventListener("resize", function () {
                clearTimeout(d), d = setTimeout(c, 300)
            }, !1), a.addEventListener("pageshow", function (a) {
                a.persisted && (clearTimeout(d), d = setTimeout(c, 300))
            }, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener("DOMContentLoaded", function () {
                e.body.style.fontSize = 12 * i + "px"
            }, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function (a) {
                var b = parseFloat(a) * this.rem;
                return "string" == typeof a && a.match(/rem$/) && (b += "px"), b
            }, k.px2rem = function (a) {
                var b = parseFloat(a) / this.rem;
                return "string" == typeof a && a.match(/px$/) && (b += "rem"), b
            }
        }(window, window.lib || (window.lib = {}));
    </script>

    <link href="/css/pay.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="view pay-view">
            <img class="img-card" src="/assets/img-card@2x.jpg">
            <p class="name">有品位全国旅游年卡<span class="yuanjia">￥388.00</span><span class="money">￥0.01</span></p>
            <!--<div class="line"></div>
              <div>
                  <span>购买数量</span>
                  <img src="/assets/sub@2x.png" >
                  <div>
                      <input type="text" >
                  </div>
                  <img src="/assets/sub@2x.png" >
              </div>-->
            <!--<div class="info">
              <span>购买信息</span>
            </div>-->
            <div class="ui-from">
                <div class="ui-input">
                    <label>姓名</label>
                    <input type="text" id="uname" maxlength="16" placeholder="请输入购买人姓名" />
                </div>
                <div class="ui-input ui-input-phone">
                    <label>手机</label>
                    <input type="number" id="phone" maxlength="11" placeholder="请输入手机号码" />
                </div>
            </div>
            <div class="bg-box">
                <a class="btn-pay" href="javascript:void(0)">微信支付</a>
                <p class="notice">购买须知</p>
                <div class="notice-content">
                    <p>1.购买成功后需关注有品位公众号领取</p>
                    <p>2.本电子卡有效期到12月31日有效</p>
                    <p>3.签约景区使用条件不尽相同，出游前请查看“景区目录”避免影响您的行程</p>
                    <p>4.不能正常游览的景区，会及时在微信平台发布消息</p>
                    <p>5.电子卡一经售出不退不换</p>
                </div>
            </div>
        </div>
    </div>
    <!-- weixin jssdk  -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js "></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <script>
        function queryString(name) {
            var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
            if (result == null || result.length < 1) {
                return "";
            }
            return result[1];
        }

        function isMobile(val) {
            var reg = /^1[3, 4, 5, 6, 7, 8]\d{9}$/;
            return reg.test(val);
        }

        $(document).ready(function () {
            $('.btn-pay').on('click', function () {
                var remote_url = 'http://web.lh525.cn';

                var name = $('#uname').val().trim();
                var phone = $('#phone').val().trim();

                if (name === '') {
                    alert('请输入姓名！')
                    return;
                }

                if (!isMobile(phone)) {
                    alert('请输入手机号码！')
                    return;
                }

                if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                    }
                } else {
                    fPostCharge();
                }
            })
        })

        //调用微信JS api 支付
        function fPostCharge() {
            var name = $('#uname').val().trim();
            var phone = $('#phone').val().trim();

            var orderFrom = {
                action: 1,
                ucode: 11,
                productId: 1,
                price: 0.01,
                phone: phone,
                cid: 1,
                uname: decodeURIComponent(name)
            };

            $.ajax({
                type: "post",
                url: "/Home/RemoteOrder",
                data: orderFrom,
                dataType: "json",
                success: function (result) {
                    if (result.state) {
                        wxPay(result.orderId);
                    } else {
                        alert(result.error_msg);
                    }
                },
                error: function (xhr, data, obj) {

                }
            });
        }

        //微信统一下单
        function wxPay(orderId) {
            $.ajax({
                type: 'post',
                url: '/Pay/wxpayParam',
                data: {
                    OrderId: orderId
                },
                dataType: 'json',
                success: function (data) {
                    if (data.State) {
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId": data.param.appId, //公众号名称，由商户传入
                                "timeStamp": data.param.timeStamp, //时间戳，自1970年以来的秒数
                                "nonceStr": data.param.nonceStr, //随机串
                                "package": data.param.package,
                                "signType": "MD5", //微信签名方式:
                                "paySign": data.param.paySign //微信签名
                            },
                            function (res) {
                                if (res.err_msg == "get_brand_wcpay_request:ok") {
                                    var url = "/home/success";
                                    location.href = url;
                                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                    window.history.go(-1);
                                    console.log('已取消支付')
                                } else if (res.err_msg = "get_brand_wcpay_request:fail") {
                                    //alert('支付异常')
                                    //window.location.href = "/Home/QrCode" + location.search;
                                    //window.history.go(-1)
                                }

                                log(res)
                            });
                    } else {
                        console.error(data.error_info)
                    }
                },
                error: function (xhr, type) {
                    alert('网络异常,请您重新提交');
                }
            });
        }

        //调用微信支付模块
        function onBridgeReady(json) {
            fPostCharge();
        }

        function log(obj) {
            $.ajax({
                url: '/WeiXin/Log',
                type: 'post',
                data: { log: JSON.stringify(obj) },
                dataType: 'json',
                success: function (data) {
                }
            })
        }
    </script>
</body>
</html>